<div class="field-wrapper">
    <div class="box-shadow" #bidOpenCeremonyRef>
        <div class="top-bar">
            <span>{{componentData.labelText?componentData.labelText:'开标仪式'}}</span>
            <div class="spacer"></div>
            <a nz-button nzType="link" style="color:#000" (click)="toggleFullScreen()">
                <i class="iconfont icon-fullscreen-fill"></i>
            </a>
        </div>
        <div class="content" [ngStyle]="{'backgroundImage': 'url('+ curBgImgUrl+')' }"
            [zeprideAuthority]="zeprideAuthorityData">

            <div style="display: flex; flex: 1;">
                <div class="catalog"
                    [ngStyle]="{'color': (dm.panelTxtConfigs && dm.panelTxtConfigs[0]) ? dm.panelTxtConfigs[0].color : '', 'font-size.px':(dm.panelTxtConfigs && dm.panelTxtConfigs[0]) ? dm.panelTxtConfigs[0].fontSize : '' }">
                    <div [ngClass]="{'catalog-item-s': item.selected}" (click)="selectTab(item)"
                        (dblclick)="editMode('tagTitle'+index)" class="catalog-item"
                        *ngFor="let item of dm.tabContents; let index = index" nzTooltipTitle="双击进行编辑"
                        nzTooltipPlacement="topCenter" nz-tooltip>
                        <span *ngIf="!editModeStatus['tagTitle'+index]">{{item.tagTitle}}</span>
                        <input *ngIf="editModeStatus['tagTitle'+index]" class="no-border" nz-input nzBorderless
                            [(ngModel)]="item.tagTitle" (blur)="cancelEdit('tagTitle'+index)" />
                    </div>
                </div>

                <div class="main">
                    <div class="main-title"
                        [ngStyle]="{'color': (dm.panelTxtConfigs && dm.panelTxtConfigs[1]) ? dm.panelTxtConfigs[1].color : '', 'font-size.px':(dm.panelTxtConfigs && dm.panelTxtConfigs[1]) ? dm.panelTxtConfigs[1].fontSize : ''}"
                        (dblclick)="editMode('mainTitle')" nzTooltipTitle="双击进行编辑" nzTooltipPlacement="topCenter"
                        nz-tooltip>
                        <span *ngIf="!editModeStatus.mainTitle">{{curTabItem.mainTitle}}</span>
                        <input *ngIf="editModeStatus.mainTitle" class="no-border" nz-input nzBorderless
                            [(ngModel)]="curTabItem.mainTitle" (blur)="cancelEdit('mainTitle')" />
                    </div>
                    <div class="main-body"
                        [ngStyle]="{'color': (dm.panelTxtConfigs && dm.panelTxtConfigs[2]) ? dm.panelTxtConfigs[2].color : '', 'font-size.px':(dm.panelTxtConfigs && dm.panelTxtConfigs[2]) ? dm.panelTxtConfigs[2].fontSize : ''}"
                        (dblclick)="editMode('bodyTxt')" nzTooltipTitle="双击进行编辑" nzTooltipPlacement="topCenter"
                        nz-tooltip>
                        <div *ngIf="!editModeStatus.bodyTxt" [innerHTML]="curTabItem.bodyTxt"></div>
                        <textarea *ngIf="editModeStatus.bodyTxt" class="no-border" rows="10" nz-input
                            [(ngModel)]="curTabItem.bodyTxt" (blur)="cancelEdit('bodyTxt')"></textarea>
                    </div>
                </div>
            </div>

            <div class="ac-buttom">
                <span class="fg">{{curTabItem.tagTitle?curTabItem.tagTitle[0]:''}}</span>
                <span>{{curTabItem.tagTitle}}</span>
                <div class="spacer" style="text-align: center;">
                    <a nz-button nzType="link" class="play-btn" (click)="play()"
                        *ngIf="playObj.status == '' || playObj.status == 'pause'">
                        <i class="iconfont icon-play-circle-fill"></i>
                    </a>
                    <a nz-button nzType="link" class="play-btn" (click)="pausePlay()"
                        *ngIf="playObj.status == 'playing'">
                        <i class="iconfont icon-pause-fill"></i>
                    </a>
                    <a nz-button nzType="link" class="play-btn" (click)="stopPlay()" *ngIf="playObj.status != ''">
                        <i class="iconfont icon-refresh-line"></i>
                    </a>
                </div>

                <button style="background-color: transparent; color: #fff;margin-right: 15px;" nz-button
                    nzType="default" [disabled]="!isAuthorized" (click)="moreBackgroundImgs()" *ngIf="!isfullscreen">
                    <i class="iconfont icon-camera-line"></i>
                    编辑背景图片
                </button>
                <!-- <a nz-button nzType="link">
                    <i nz-icon nzType="sound" nzTheme="fill"></i>
                </a> -->
                <a nz-button [disabled]="!isAuthorized" nzType="link" nz-popover [nzPopoverContent]="contentTemplate"
                    nzPopoverTrigger="click" (click)="getVoices()" *ngIf="!isfullscreen">
                    <i class="iconfont icon-settings-3-line"></i>
                </a>

            </div>
        </div>

    </div>
</div>

<ng-template #contentTemplate>
    <div class="setting-item">
        <span>音色</span>
        <div class="spacer"></div>
        <nz-select style="width: 100px;" [(ngModel)]="playObj.voiceName">
            <nz-option nzValue="Microsoft Huihui - Chinese (Simplified, PRC)" nzLabel="女一"></nz-option>
            <nz-option nzValue="Microsoft Yaoyao - Chinese (Simplified, PRC)" nzLabel="女二"></nz-option>
            <nz-option nzValue="Microsoft Yunyang Online (Natural) - Chinese (Mainland)" nzLabel="男一"></nz-option>
        </nz-select>
    </div>
    <div class="setting-item">
        <span>播放速度</span>
        <div class="spacer"></div>
        <nz-select style="width: 100px;" [(ngModel)]="playObj.rate">
            <nz-option [nzValue]="1" nzLabel="正常"></nz-option>
            <nz-option [nzValue]="0.7" nzLabel="慢速"></nz-option>
            <nz-option [nzValue]="1.2" nzLabel="快速"></nz-option>
        </nz-select>
    </div>
    <div style="height: 1px; background-color: #ccc;"></div>
    <a nz-button nzType="link" nzBlock style="padding: 10px; color: #000" (click)="reset()">
        重置为默认
    </a>
</ng-template>